<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" lang="zh-CN" class="translated-ltr">
<head>
    <meta charset="UTF-8">
    <title>松书</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/loginForm.css">
    <link rel="icon" href="/blog/img/icon.jpg" type="image/jpg">
    <link rel="stylesheet" href="/iconfont/iconfont.css">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/jquery/dist/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
    <script src="/layer/layer.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="commonjs/util.js"></script>
    <script src="commonjs/createFriendList.js"></script>
    <script src="commonjs/createRack.js"></script>
    <style>
        #logfm>div{
            display: flex;
            flex-direction: row;
            align-items: normal;
            flex-wrap: wrap;
            text-align: center;
        }
        #logfm>div>.col-4>label {
            line-height: 35px;
            font-weight: bold;
        }
        .loginerrors{
            display: block;
            height: 20px;
            color: orangered;
            font-size: 13px;
            line-height: 10px;
        }
        .title {
            font-size: 30px;
            text-align: center;
            margin: 30px;
            font-weight: bold;
        }
    </style>
    <style>
        #personalNav {
            display: none;
        }
        #userInfo {
            width: 800px;
        }
        #popmessage {
            position: absolute;
            z-index: 19980424;
            width: 200px;
            height: 50px;
            left: 50%;
            text-align: center;
            line-height: 50px;
            border: #80bdff 3px solid;
            border-radius: 17px;
            color: whitesmoke;
            background-color: #40AFFE;
            top: 50%;
            margin-left: -100px;
        }
        #mylabel dd{
            padding: 5px;
            margin-left: 5px;
        }
        #otherUser .alert{
            margin: 5px;
            display: inline-block;
            padding: 5px;
        }
        #otherWrap {
            background-color: white;
            width: 798px;
            height: 520px;
            border-radius: 8px;
        }
        #infoBtns {
        }
        #addFriend {
            display: block;
            float: right;
        }
        #addFriend button{
            vertical-align: bottom;
        }
        #otherInfoContent {
            padding:0px 20px;
            width: 100%;
        }
        #otherInfoContent p {
            margin-top: 20px;
        }
        #messagePost {
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            border-top: #b9bbbe 3px solid;
            width: 100%;
            height: 200px;
            background-color: snow;
            bottom: -190px;
            position: absolute;
            font-size: 13px;
            padding: 30px;
        }
        #floatBtn {
            outline: none;
            bottom: 200px;
            position: absolute;
            left: 50%;
            margin-left: -40px;
            width: 80px;
            font-size: 13px;
            border-top-right-radius: 15px;
            border-top-left-radius: 15px;
            border: #b9bbbe 3px solid;
            border-bottom: none;
        }
        #otherMessageBoard {
            position: relative;
            overflow: hidden;
        }
        #messageContent,#myboard {
            height: 520px;
            width: 790px;
        }
        #messageContent li {
            width: 740px;
            margin: 7px 20px;
            padding: 5px 5px;
            border: #2F4056 1px solid;
            border-radius: 3px;
            background: #f2f2f2;
        }
        #messageContent>li>p{
            display: inline;
            font-size: 14px;
            padding: 5px;
            margin: 20px 0px;
        }
        #messageContent .messageRecord{
            margin: 0px auto 10px;
            padding: 5px;
            font-size: 14px;
            color: #6c757d;
        }
        #messageContent .messageReply{
            width: 80px;
            height: 40px;
        }
        #messageContent span {
            margin-left: 80px;
        }
        #myboard li {
            width: 740px;
            margin: 7px 20px;
            padding: 5px 5px;
            border: #2F4056 1px solid;
            border-radius: 3px;
            background: #f2f2f2;
        }
        #myboard>li>p{
            display: inline;
            font-size: 14px;
            padding: 5px;
            margin: 20px 0px;
        }
        #myboard .messageRecord{
            margin: 0px auto 10px;
            padding: 5px;
            font-size: 14px;
            color: #6c757d;
        }
        #myboard .messageReply{
            width: 80px;
            height: 40px;
        }
        #myboard span {
            margin-left: 80px;
        }
        #mainContent>.w{
            height: 600px;
            background-color: white;
            border-radius: 10px 0 10px 10px;
        }
        .nullnode {
            position: absolute;
            top: 50%;
            text-align: center;
            font-size: 25px;
            width: 100%;
            margin-top: -50px;
        }
        #addBookBtn,#addWishBtn{
            position: absolute;
            top: -40px;
        }
        .messageItems{
            background-color: #ebebeb;
            margin: 5px 10px;
            border-radius: 3px;
            padding: 5px;
            display: flex;
            flex-wrap: wrap;
            font-size: 14px;
            border: #4e555b 1px solid;
        }
        .messageItems span{
            margin: 0 10px;
            color: #6c757d;
        }
        .messageItems>p{
            margin-bottom: 10px;
        }
        #infoShow>dl {
            margin: 20px 0;
        }
        .layui-tab-card {
            margin-top: 5px;
            margin-bottom:0px ;
            border-bottom: none;
        }
        #nav .layui-nav>li{
            padding: 0;
            text-align: center;
        }

        .modelWrap {
            padding: 50px;
        }
    </style>
</head>
<body>
<div id="top">
    <div class="w">
        <img  src="blog/img/icon.jpg" id="icon" alt="icon">
        <span class="col-12" style="font-size: 13px;color: #4e555b;" th:if="${username}">
         <p  style="display: inline-block;height: 25px;vertical-align: top;margin-right: 5px" th:text="${username}"></p>
         <a  href="user/logout" style="line-height: 35px;font-size: 12px;float: right">注销</a></a>
         </span>
        <span class="col-10" style="font-size: small;color: #4e555b" th:if="!${username}">您当前是游客身份，只能浏览，要借阅书籍，请
        <a style="color: crimson" id="login" href="#"> 登陆 </a>或<a style="color: crimson" id="register"> 注册 </a></span>
    </div>
</div>
<div  id="logo" style="height: 80px"></div>
<div id="nav" >
    <div class="w" style="margin-bottom: 5px">
        <div id = 'bookfilter' class="col-6" style="padding-left: 0px">
            <form id = 'filterform' style="display: flex;padding-bottom: 8px">
                <input type="search" class="form-control mr-sm-2" name="filtertxt" placeholder="搜索书名或作者...">
                <button type="button" id="searchRackBtn" class="layui-btn " ><i class="layui-icon layui-icon-search"></i>搜索</button>
                <div style="position: absolute;top: 40px;font-size: 11px">
                    <input type="checkbox" name="option" value="name"  style="margin-left: 10px" checked>搜索书名
                    <input type="checkbox" name="option" value="author" style="margin-left: 15px" checked>搜索作者
                </div>
            </form>
        </div>
        <ul class="layui-nav col-6" lay-filter="" style="float: right">
            <li class="layui-nav-item layui-this col-4"  id = "cityRack" ><a >同城书架</a></li>
            <li class="layui-nav-item col-4"  id = "shopRack" ><a >松书商城</a></li>
            <li class="layui-nav-item col-4" id = "userCenter" ><a >个人中心<span class="badge badge-danger">12</span></a></li>
        </ul>
        <div id="slide" style="position: absolute;left: -200px;top: 0px;">
            <button class="layui-btn" style="padding:0 52px;" onclick=slideFriends()><i class="layui-icon layui-icon-dialogue"></i>好友列表</button>
            <div id="slideContent" >
                <div id="searchUserBox" style="font-size: 12px;">
                    <input id="searchUserText" type="text" placeholder="搜索用户名..." class="form-control" style="display: inline-block;width: 100px;font-size: 15px;">
                    <input type="button" id="searchUserBtn" class="layui-btn layui-btn-primary" value="搜索" style="display:inline-block;width: 60px;vertical-align: bottom;padding: 0px">
                    <hr class="layui-bg-green" style="margin-bottom: 10px;height: 2px">
                </div>
                <ul id="friendList" >
<<<<<<< HEAD
                    {% for n in friends %}
                    <li data-userid={{n.id}} onclick="userPage()"> <span class="iconfont icon-yonghu"></span><a style="color: crimson" id="widgets">{{n.name}}</a></li>
                   <!-- <a style="color: crimson" id="register"> 注册 </a></span>-->
                    {% endfor %}
=======
>>>>>>> origin/master
                </ul>
                <div id="searchResultBox" style="display: none;">
                    <span  id="returnTofriend" onclick="backFriend()" class="iconfont icon-fanhui" style="margin-left: 110px;font-size: 13px">返回</span>
                    <p>搜索结果:</p>
                    <ul id="searchUserList">
                    </ul>
                </div>
    </div>
</div>
    </div>
</div>
<div class="w" style="flex-direction: row-reverse; ">
    <div class="layui-tab layui-tab-card" id="personalNav">
        <ul class="layui-tab-title"  >
            <li  onclick="getmyRack()">我的书架<span class="badge badge-danger">5</span><span class="badge badge-secondary"></span></li>
            <li  onclick="getmyWish()">我的愿望单</li>
            <li  onclick="toMessageBox()">消息记录<span class="badge badge-danger">4</span><span class="badge badge-secondary"></span></li>
            <li  onclick="toLeaveBoard()">留言板<span class="badge badge-danger">3</span><span class="badge badge-secondary"></span></li>
        </ul>
    </div>
</div>

<div id = "mainContent" >
    <div class="w" >
    </div>
</div>


<script>

    state = 0  /*表示当前选中的导航项目，0同校书架，1同城书架，2个人中心*/
    $("#register").click(function(){
            layer.open({
                type: 2,
                skin: 'layui-layer-movl',
                content:['page/register/form','no'],
                area:['600px','600px'],
                title:false,
                closeBtn:1,
            })})
    $("#login").click(function () {
        layer.open({
            type:2,
            skin:'layui-layer-movl',
            content:['page/login/form','no'],
            area:['400px','250px'],
            title:false,
            closeBtn:1
        })
    })
    $("#widgets").click(function () {
        layer.open({
            type:2,
            skin:'layui-layer-movl',
            content:['page/chat/widgets','no'],
            area:['500px','380px'],
            title:false,
            closeBtn:1
        })
    })
    layui.use('element', function(){
        var element = layui.element;
        //…
    });
</script>
<script>
    //存储页面状态信息
    var statuses={
        loginedUsername:"",     //表示当前登陆用户的用户名
        loginedUserid:"", //-1表示当前未登录
        rackState:0
    }
    var addstatus = 0

    var addWishstatus = 0

    var rack = $("#bookRack")
    var myboard = $("#myboard")
    var mybooklist = $("#mybooklist")

    //搜索用户，回显到搜索框
    //已登陆的初始化选项
    refreshLoginState();
    //绑定事件
    $("#searchUserBtn").click(doSearchUserHandle);
    $("#searchRackBtn").click(getFilterRackHandle);
    $("#cityRack").click(function () {
        getCityRackHandle("成都");
    });
    $("#shopRack").click(getShopRackHandle);
    $("#userCenter").click(toUserCenterHandle(statuses.loginedUserid));
    //初始化
    if(statuses.loginedUserid==="") {
        popMessage("请登陆")
        //未登录时的初始化选项
    }
    else {
        // popMessage("123")
        // renderFriendList();//初始化好友列表
        // InitRack();//初始化书架
    }
    function doSearchUserHandle() {
        $("#friendList").css("display","none");
        $("#searchResultBox").css("display","block");
        $("#searchUserList").empty();
        searchUser($("#searchUserText").val(),$("#searchUserList"));
    }
    //渲染好友列表
    function renderFriendList(){
        getFriendList(statuses.loginedUserid,$("#friendList"));
    }
    function getFilterRackHandle() {
        getRack('filter',$("#bookRack"))
    }








    function toLeaveBoard() {
        clearContent()
        myboard.css('display','block')
        getLeaveBoard(userid,myboard)
    }








   /* function userPage() {
            layer.open({
            type:2,
            skin:'layui-layer-movl',
            content:['page/widgets/form','no'],
            area:['400px','250px'],
            title:false,
            closeBtn:1

        // var page = $("#otherUser")
        // var userid = event.id
        // otherid = userid
        // $("#personalNav").slideUp();
        // page.css('display','block').attr('data-id',userid)
        // getRack(page[0].dataset.id,$("#otherRack"))
        // renderOtherInfo(page[0].dataset.id,$("#otherInfo"))
        // getLeaveBoard(userid,$("#messageContent"))
        // toOtherInfo()
    })}*/



    function toUserCenterHandle() {
        $("#personalNav").slideDown();
        $("#userInfo").css("display","block")
    }

    function backFriend() {
        $("#friendList").css("display","block");
        $("#searchResultBox").css("display","none");
    }
    function slideFriends() {
        refreshLoginState();
        if(statuses.loginedUserid!==""){
            $("#slideContent").slideToggle();
        }
        else {
            popMessage("请先登陆")
        }
    }
</script>
</body>
</html>